<template>
	<view class="history-container">
		<!-- 顶部标题区域 -->
		<view class="header-section">
			<view class="header-card">
				<view class="header-content">
					<view class="header-title">
						<text class="title-text">预约历史</text>
						<text class="title-subtitle">Booking History</text>
					</view>
					<view class="header-icon">📚</view>
				</view>
			</view>
		</view>

		<!-- 筛选区域 -->
		<view class="tabs-section">
			<view class="tabs-card">
				<view class="tabs-container">
					<view 
						class="tab-item" 
						:class="{ active: currentFilter === 'all' }"
						@click="setFilter('all')"
					>
						<text class="tab-text">全部</text>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentFilter === 'completed' }"
						@click="setFilter('completed')"
					>
						<text class="tab-text">已完成</text>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentFilter === 'rejected' }"
						@click="setFilter('rejected')"
					>
						<text class="tab-text">已拒绝</text>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentFilter === 'cancelled' }"
						@click="setFilter('cancelled')"
					>
						<text class="tab-text">已取消</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 历史记录列表区域 -->
		<view class="history-section">
			<view class="history-card">
				<view class="section-header">
					<view class="section-title-wrapper">
						<text class="section-title">历史记录</text>
						<text class="section-count">({{ filteredBookings.length }})</text>
					</view>
					<view class="date-filter-wrapper">
						<picker 
							mode="date" 
							:value="theDate" 
							:start="minDate" 
							:end="maxDate" 
							@change="onDateChange"
							v-if="minDate && maxDate"
						>
							<view class="date-picker">
								<text class="date-icon">📅</text>
								<text class="date-text" :class="{ 'date-placeholder': !theDate }">
									{{ theDate || '选择日期' }}
								</text>
							</view>
						</picker>
						<view class="date-picker" v-else>
							<text class="date-icon">📅</text>
							<text class="date-text date-placeholder">加载中...</text>
						</view>
						<view class="filter-actions">
							<view class="filter-btn reset-btn" @click="resetDateFilter">
								<text class="btn-text">重置</text>
							</view>
							<view class="filter-btn search-btn" @click="applyDateFilter">
								<text class="btn-text">查询</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 加载状态 -->
				<view v-if="isLoading" class="loading-state">
					<view class="loading-icon">⏳</view>
					<text class="loading-text">加载中...</text>
				</view>
				
				<!-- 空状态 -->
				<view v-else-if="filteredBookings.length === 0" class="empty-state">
					<view class="empty-icon">📅</view>
					<text class="empty-title">暂无历史记录</text>
					<text class="empty-desc">您还没有已完成的预约或被拒绝的预约</text>
				</view>
				
				<view v-else-if="!isLoading" class="history-list">
					<view 
						class="history-item" 
						v-for="(booking, index) in filteredBookings" 
						:key="index"
						@click="viewHistoryDetail(booking)"
					>
						<view class="history-header">
							<view class="history-title">{{ booking.meetingName }}</view>
							<view class="history-status" :class="booking.status">
								<text class="status-text">{{ getStatusText(booking.status) }}</text>
							</view>
						</view>
						
						<view class="history-info">
							<view class="info-row">
								<text class="info-label">会议室：</text>
								<text class="info-value">{{ booking.roomName }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">日期：</text>
								<text class="info-value">{{ formatDate(booking.meetingDate) }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">时间：</text>
								<text class="info-value">{{ booking.meetingTimeRange.start }} - {{ booking.meetingTimeRange.end }}</text>
							</view>
							<view class="info-row">
								<text class="info-label">召集人：</text>
								<text class="info-value">{{ booking.organizer }}</text>
							</view>
						</view>
						
						<view class="history-footer">
							<text class="history-date">{{ formatDateTime(booking.createdAt) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 回到顶部按钮 -->
		<view class="back-to-top" :class="{ 'show': showBackToTop }" @click="scrollToTop">
			<text class="back-to-top-icon">↑</text>
		</view>
	</view>
</template>

<script>
import api, { handleApiError } from '@/utils/api.js'

export default {
	data() {
		// 获取日期范围
		const today = new Date();
		const minDate = new Date(today);
		minDate.setFullYear(today.getFullYear() - 2); // 最早2年前
		const maxDate = new Date(today);
		
		// 格式化日期辅助函数
		const formatDateForPicker = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};
		
		return {
			currentFilter: 'all',
			historyBookingsList: [],
			isLoading: false,
			roomMap: {}, // 会议室映射，key为pid，value为会议室名称
			userMap: {}, // 用户映射，key为userId，value为用户信息
			currentUser: null, // 当前用户信息
			isFirstLoad: true, // 标记是否首次加载，避免 mounted 和 onShow 重复调用
			theDate: '', // 选择的日期
			minDate: formatDateForPicker(minDate), // 最早可选日期
			maxDate: formatDateForPicker(maxDate), // 最晚可选日期（今天）
			showBackToTop: false // 是否显示回到顶部按钮
		}
	},
	computed: {
		totalBookings() {
			return this.historyBookingsList.length;
		},
		completedBookings() {
			return this.historyBookingsList.filter(booking => booking.status === 'completed').length;
		},

		filteredBookings() {
			// 直接返回接口返回的数据，不在前端过滤
			return this.historyBookingsList;
		}
	},
	async mounted() {
		// 先加载基础数据
		await Promise.all([
			this.loadCurrentUser(),
			this.loadRoomList(),
			this.loadUserList()
		]);
		// 加载历史记录数据（根据当前筛选条件，默认全部）
		await this.loadHistoryBookings();
		this.isFirstLoad = false; // 标记首次加载完成
	},
	onPageScroll(e) {
		// 监听页面滚动，控制回到顶部按钮显示
		const scrollTop = e.scrollTop || 0;
		// 判断是否显示回到顶部按钮（滚动超过300rpx时显示，约150px）
		if (scrollTop > 150) {
			this.showBackToTop = true;
		} else {
			this.showBackToTop = false;
		}
	},
	onShow() {
		// 页面显示时刷新数据（避免与 mounted 重复调用）
		// 只在非首次加载时刷新
		if (!this.isFirstLoad) {
			// 确保用户信息已加载
			if (this.currentUser && this.currentUser.userId) {
				this.loadHistoryBookings();
			} else {
				// 如果用户信息不存在，先加载用户信息
				this.loadCurrentUser().then(() => {
					if (this.currentUser && this.currentUser.userId) {
						this.loadHistoryBookings();
					}
				});
			}
		}
	},
	methods: {
		// 加载当前用户信息
		async loadCurrentUser() {
			try {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo && storedUserInfo.userId) {
					this.currentUser = {
						userId: storedUserInfo.userId,
						userName: storedUserInfo.userName || storedUserInfo.username,
						nickName: storedUserInfo.nickName || storedUserInfo.nickname
					};
				}
				
				// 从接口获取最新用户信息
				const response = await api.getUserInfo();
				if (response && response.code === 200 && response.user) {
					const user = response.user;
					if (!user.userId) {
						console.error('用户信息中缺少userId');
						return;
					}
					this.currentUser = {
						userId: user.userId,
						userName: user.userName,
						nickName: user.nickName
					};
				} else {
					console.error('获取用户信息失败:', response?.msg);
				}
			} catch (error) {
				console.error('获取当前用户信息错误:', error);
				// 如果获取失败，尝试使用本地存储的信息
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo && storedUserInfo.userId) {
					this.currentUser = {
						userId: storedUserInfo.userId,
						userName: storedUserInfo.userName || storedUserInfo.username,
						nickName: storedUserInfo.nickName || storedUserInfo.nickname
					};
				}
			}
		},
		
		// 加载会议室列表
		async loadRoomList() {
			try {
				const response = await api.getRoomList();
				if (response && response.code === 200) {
					const rooms = response.rows || [];
					this.roomMap = {};
					rooms.forEach(room => {
						const roomId = room.roomId || room.id;
						const roomName = room.roomName || room.name || '未知会议室';
						this.roomMap[roomId] = roomName;
					});
				}
			} catch (error) {
				console.error('获取会议室列表错误:', error);
			}
		},
		
		// 加载用户列表
		async loadUserList() {
			try {
				const response = await api.getUserList();
				if (response && response.code === 200) {
					const users = response.rows || [];
					this.userMap = {};
					users.forEach(user => {
						const userId = user.userId;
						this.userMap[userId] = {
							nickName: user.nickName || user.userName,
							userName: user.userName
						};
					});
				}
			} catch (error) {
				console.error('获取用户列表错误:', error);
			}
		},
		
		// 加载历史记录数据
		async loadHistoryBookings() {
			if (!this.currentUser || !this.currentUser.userId) {
				console.warn('未获取到当前用户信息');
				uni.showToast({
					title: '获取用户信息失败，请重新登录',
					icon: 'none',
					duration: 2000
				});
				// 尝试重新加载用户信息
				await this.loadCurrentUser();
				if (!this.currentUser || !this.currentUser.userId) {
					this.historyBookingsList = [];
					this.isLoading = false;
					return;
				}
			}
			
			this.isLoading = true;
			
			try {
				// 确保 reservedby 必传，使用当前用户的 ID
				const currentUserId = this.currentUser.userId;
				if (!currentUserId) {
					throw new Error('当前用户ID不能为空');
				}
				
				// 根据筛选条件构建请求参数
				const params = {
					reservedby: currentUserId,
					pageNum: 1,
					pageSize: 999,
					orderByColumn: 'id',
					isAsc: 'desc'
				};
				
				// 根据当前筛选条件传state参数（全部不传state）
				// 历史记录页面：全部、已完成(state=2且时间已过)、拒绝(state=3)、已取消(state=4)
				// 但已完成需要前端判断时间，所以：
				// - 全部：不传state，前端过滤已完成、拒绝、已取消
				// - 已完成：传state=2，前端再过滤时间已过的
				// - 拒绝：传state=3
				// - 已取消：传state=4
				if (this.currentFilter === 'completed') {
					params.state = '2'; // 通过（已完成）
				} else if (this.currentFilter === 'rejected') {
					params.state = '3'; // 拒绝
				} else if (this.currentFilter === 'cancelled') {
					params.state = '4'; // 已取消
				}
				// 全部（currentFilter === 'all'）不传state参数
				
				// 如果选择了日期，添加thedate参数
				if (this.theDate) {
					params.thedate = this.theDate;
				}
				
				// 如果没有选择日期，使用默认日期范围（当前日期前后3个月）
				let startDateStr, endDateStr;
				if (this.theDate) {
					// 如果选择了日期，使用该日期作为查询范围（前后各一个月）
					const selectedDate = new Date(this.theDate);
					const startDate = new Date(selectedDate);
					startDate.setMonth(selectedDate.getMonth() - 1);
					const endDate = new Date(selectedDate);
					endDate.setMonth(selectedDate.getMonth() + 1);
					startDateStr = this.formatDateForApi(startDate);
					endDateStr = this.formatDateForApi(endDate);
				} else {
					// 默认：当前日期前后3个月的数据范围
					const today = new Date();
					const startDate = new Date(today);
					startDate.setMonth(today.getMonth() - 3);
					startDate.setDate(1);
					
					const endDate = new Date(today);
					endDate.setMonth(today.getMonth() + 3);
					endDate.setDate(0); // 获取该月最后一天
					startDateStr = this.formatDateForApi(startDate);
					endDateStr = this.formatDateForApi(endDate);
				}
				
				// 使用接口获取历史记录（reservedby必传当前用户ID）
				const response = await api.getMeetingsByMonth(startDateStr, endDateStr, params);
				
				if (response && response.code === 200) {
					const meetings = response.rows || [];
					// 转换数据格式
					this.historyBookingsList = meetings
						.filter(meeting => {
							// 如果是全部，需要过滤：只保留已完成（state: 2 且时间已过）和被拒绝（state: 3）
							if (this.currentFilter === 'all') {
								if (meeting.state === '3') {
									return true; // 被拒绝的
								}
								if (meeting.state === '2') {
									// 已通过的，检查时间是否已过
									return this.isMeetingCompleted(meeting);
								}
								if (meeting.state === '4') { // 已取消
									return true;
								}
								return false;
							}
							// 如果是已完成，需要检查时间是否已过
							if (this.currentFilter === 'completed' && meeting.state === '2') {
								return this.isMeetingCompleted(meeting);
							}
							// 如果是拒绝，直接返回（接口已经过滤了state=3）
							if (this.currentFilter === 'rejected' && meeting.state === '3') {
								return true;
							}
							if (this.currentFilter === 'cancelled' && meeting.state === '4') {
								return true;
							}
							return false;
						})
						.map(meeting => {
							// 根据state判断状态
							let status = 'completed';
							if (meeting.state === '3') {
								status = 'rejected'; // 被拒绝
							} else if (meeting.state === '2') {
								status = 'completed'; // 已完成
							} else if (meeting.state === '4') { // 已取消
								status = 'cancelled';
							}
							
							return {
								id: meeting.id,
								meetingName: meeting.meetingtitle || '会议',
								roomName: this.roomMap[meeting.pid] || '未知会议室',
								meetingDate: meeting.thedate,
								meetingTimeRange: {
									start: meeting.startTime || '09:00',
									end: meeting.endTime || '10:00'
								},
								organizer: this.userMap[meeting.convener]?.nickName || '未知',
								participants: meeting.content || '',
								status: status,
								meetingSupport: meeting.ensure === 1 ? 'yes' : 'no',
								remark: meeting.remark || '',
								state: meeting.state,
								yuanyin: meeting.yuanyin || '',
								createdAt: meeting.createTime || ''
							};
						});
					
					// 按创建时间排序，最新的在前
					this.historyBookingsList.sort((a, b) => {
						if (a.createdAt && b.createdAt) {
							return new Date(b.createdAt) - new Date(a.createdAt);
						}
						return 0;
					});
				} else {
					console.error('获取历史记录失败:', response?.msg);
					this.historyBookingsList = [];
				}
			} catch (error) {
				console.error('获取历史记录错误:', error);
				handleApiError(error);
				this.historyBookingsList = [];
			} finally {
				this.isLoading = false;
			}
		},
		
		// 判断会议是否已完成（时间已过）
		isMeetingCompleted(meeting) {
			const now = new Date();
			const meetingDate = new Date(meeting.thedate);
			const endTime = meeting.endTime;
			
			if (endTime) {
				const [endHour, endMin] = endTime.split(':').map(Number);
				const endDateTime = new Date(meetingDate);
				endDateTime.setHours(endHour, endMin, 0, 0);
				
				// 如果结束时间已过，则认为已完成
				return now > endDateTime;
			}
			
			return false;
		},
		
		// 格式化日期用于API请求
		formatDateForApi(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		// 格式化日期用于picker组件
		formatDateForPicker(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		// 日期改变
		onDateChange(e) {
			if (e && e.detail && e.detail.value) {
				this.theDate = e.detail.value;
				// 选择日期后自动查询
				setTimeout(() => {
					this.loadHistoryBookings();
				}, 0);
			}
		},
		
		// 重置日期筛选
		resetDateFilter() {
			this.theDate = '';
			// 重新加载数据
			setTimeout(() => {
				this.loadHistoryBookings();
			}, 100);
		},
		
		// 应用日期筛选
		applyDateFilter() {
			// 重新加载数据
			setTimeout(() => {
				this.loadHistoryBookings();
			}, 100);
		},
		
		setFilter(filter) {
			// 切换筛选条件时，重新调用接口加载数据
			if (this.currentFilter !== filter) {
				this.currentFilter = filter;
				this.loadHistoryBookings();
			}
		},
		getStatusText(status) {
			const statusMap = {
				'completed': '已完成',
				'rejected': '审核拒绝',
				'cancelled': '已取消'
			};
			return statusMap[status] || status;
		},
		formatDate(dateStr) {
			if (!dateStr) return '';
			const dateParts = dateStr.split('-');
			if (dateParts.length === 3) {
				const year = dateParts[0];
				const month = parseInt(dateParts[1]);
				const day = parseInt(dateParts[2]);
				return `${year}年${month}月${day}日`;
			}
			return dateStr;
		},
		formatDateTime(dateTimeStr) {
			if (!dateTimeStr) return '';
			const date = new Date(dateTimeStr);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		viewHistoryDetail(booking) {
			let content = `会议名称：${booking.meetingName}\n会议室：${booking.roomName}\n日期：${this.formatDate(booking.meetingDate)}\n时间：${booking.meetingTimeRange.start} - ${booking.meetingTimeRange.end}\n召集人：${booking.organizer}`;
			
			if (booking.participants) {
				content += `\n参会人员：${booking.participants}`;
			}
			
			content += `\n会议保障：${booking.meetingSupport === 'yes' ? '需要' : '不需要'}`;
			
			if (booking.remark) {
				content += `\n备注：${booking.remark}`;
			}
			
			if (booking.createdAt) {
				content += `\n创建时间：${this.formatDateTime(booking.createdAt)}`;
			}
			
			if (booking.state === '3' && booking.yuanyin) {
				content += `\n拒绝原因：${booking.yuanyin}`;
			}
			
			uni.showModal({
				title: '预约详情',
				content: content,
				showCancel: false,
				confirmText: '确定'
			});
		},
		
		// 回到顶部
		scrollToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		}

	}
}
</script>

<style lang="less" scoped>
page {
	background-color: #f5f5f5;
}

.history-container {
	padding: 30rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
}

/* 顶部标题区域 */
.header-section {
	margin-bottom: 30rpx;
}

.header-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-title {
	flex: 1;
}

.title-text {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.title-subtitle {
	font-size: 24rpx;
	color: #666;
	opacity: 0.8;
}

.header-icon {
	font-size: 60rpx;
	margin-left: 20rpx;
}

/* 筛选区域 */
.tabs-section {
	margin-bottom: 30rpx;
}

.tabs-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.tabs-container {
	display: flex;
	background: rgba(248, 249, 250, 0.8);
	border-radius: 12rpx;
	padding: 4rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 8rpx;
	border-radius: 8rpx;
	background: transparent;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}

.tab-item.active {
	background: #fff;
	color: #2870E5;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-item:active {
	transform: scale(0.98);
}

.tab-text {
	font-size: 28rpx;
	font-weight: 600;
	display: block;
}

/* 历史记录列表区域 */
.history-section {
	margin-bottom: 30rpx;
}

.history-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 20rpx;
	opacity: 0.5;
}

.empty-title {
	font-size: 32rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.empty-desc {
	font-size: 26rpx;
	color: #999;
}

/* 历史记录列表 */
.history-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.history-item {
	background: rgba(255, 255, 255, 0.8);
	border: 2rpx solid #e8eaed;
	border-radius: 16rpx;
	padding: 30rpx;
	transition: all 0.3s ease;
	cursor: pointer;
}

.history-item:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 0.95);
}

.history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.history-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
}

.history-status {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.history-status.completed {
	background: rgba(82, 196, 26, 0.1);
	color: #52c41a;
}



.history-status.rejected {
	background: rgba(255, 77, 79, 0.1);
	color: #ff4d4f;
}

.history-status.cancelled {
	background: rgba(153, 153, 153, 0.1);
	color: #999;
}

.status-text {
	font-size: 24rpx;
}

.history-info {
	margin-bottom: 25rpx;
}

.info-row {
	display: flex;
	margin-bottom: 12rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-label {
	font-size: 26rpx;
	color: #666;
	width: 120rpx;
	flex-shrink: 0;
}

.info-value {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

.history-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20rpx;
	border-top: 2rpx solid #f0f0f0;
}

.history-date {
	font-size: 24rpx;
	color: #999;
}

/* 列表头部 */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	gap: 20rpx;
}

.section-title-wrapper {
	display: flex;
	align-items: center;
	gap: 8rpx;
	flex-shrink: 0;
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.section-count {
	font-size: 28rpx;
	color: #666;
}

/* 加载状态 */
.loading-state {
	text-align: center;
	padding: 80rpx 0;
}

.loading-icon {
	font-size: 60rpx;
	margin-bottom: 20rpx;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 日期筛选区域 - 移到section-header内 */
.date-filter-wrapper {
	display: flex;
	align-items: center;
	gap: 12rpx;
	flex: 1;
	justify-content: flex-end;
}

.date-picker {
	display: flex;
	align-items: center;
	padding: 10rpx 14rpx;
	background: rgba(248, 249, 250, 0.8);
	border-radius: 8rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
	gap: 8rpx;
	min-width: 140rpx;
}

.date-picker:active {
	background: rgba(248, 249, 250, 1);
	border-color: #2870E5;
}

.date-icon {
	font-size: 24rpx;
	flex-shrink: 0;
}

.date-text {
	font-size: 24rpx;
	color: #333;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.date-text.date-placeholder {
	color: #999;
}

.filter-actions {
	display: flex;
	gap: 8rpx;
	flex-shrink: 0;
}

.filter-btn {
	padding: 10rpx 16rpx;
	border-radius: 6rpx;
	font-size: 22rpx;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.reset-btn {
	background: rgba(248, 249, 250, 0.8);
	color: #666;
}

.reset-btn:active {
	background: rgba(248, 249, 250, 1);
	transform: scale(0.95);
}

.search-btn {
	background: linear-gradient(135deg, #2870E5 0%, #4A90E2 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(40, 112, 229, 0.3);
}

.search-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(40, 112, 229, 0.3);
}

.btn-text {
	font-size: 22rpx;
}

/* 回到顶部按钮 */
.back-to-top {
	position: fixed;
	right: 30rpx;
	bottom: 100rpx;
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #2870E5 0%, #4A90E2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(40, 112, 229, 0.4);
	z-index: 998;
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.back-to-top.show {
	opacity: 1;
	transform: scale(1);
}

.back-to-top:active {
	transform: scale(0.9);
	box-shadow: 0 4rpx 12rpx rgba(40, 112, 229, 0.3);
}

.back-to-top-icon {
	font-size: 40rpx;
	color: #fff;
	font-weight: bold;
	line-height: 1;
}

</style>
